<template>
  <view class="publish-task-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-left" @click="navigateBack">
        <text class="icon-arrow-left">←</text>
      </view>
      <view class="navbar-title">发布任务</view>
      <view class="navbar-right" @click="showTips">
        <text class="icon-tips">?</text>
      </view>
    </view>

    <!-- 表单容器 -->
    <view class="form-container">
      <view class="form-section">
        <view class="section-title">任务基本信息</view>
        
        <view class="form-field">
          <view class="field-label required">任务标题</view>
          <view class="field-control">
            <input 
              v-model="taskData.title" 
              placeholder="请输入简洁明了的任务标题"
              maxlength="50"
              class="text-input"
            ></input>
            <text class="field-hint">{{ taskData.title.length }}/50 字符</text>
          </view>
        </view>
        
        <view class="form-field">
          <view class="field-label required">任务类型</view>
          <view class="field-control">
            <view class="radio-group">
              <view class="radio-grid">
                <label 
                  class="radio-item" 
                  :class="{ checked: taskData.type === type.value }"
                  v-for="type in taskTypes" 
                  :key="type.value"
                  @click="taskData.type = type.value"
                >
                  <view class="radio-icon">
                    <text v-if="taskData.type === type.value">✓</text>
                  </view>
                  <text class="radio-text">{{ type.label }}</text>
                </label>
              </view>
            </view>
          </view>
        </view>
        
        <view class="form-field">
          <view class="field-label required">任务地点</view>
          <view class="field-control">
            <view class="location-input">
              <view class="select-input" @click="showCityPicker = true">
                <text v-if="taskData.city">{{ taskData.city }}</text>
                <text v-else class="placeholder">请选择城市</text>
                <text class="select-arrow">▼</text>
              </view>
            </view>
            <view class="address-input">
              <input 
                v-model="taskData.address" 
                placeholder="请输入详细地址"
                class="text-input"
              ></input>
            </view>
            <view class="location-map" @click="chooseLocation">
              <text class="map-icon">🗺️</text>
              <text class="map-text">点击选择地图位置（更精准）</text>
            </view>
          </view>
        </view>
        
        <view class="form-field">
          <view class="field-label required">任务时间</view>
          <view class="field-control">
            <view class="date-time-inputs">
              <view class="date-input">
                <input 
                  v-model="taskData.date" 
                  placeholder="选择日期"
                  class="text-input"
                  @click="showDatePicker = true"
                ></input>
              </view>
              <view class="time-input">
                <input 
                  v-model="taskData.time" 
                  placeholder="选择时间"
                  class="text-input"
                  @click="showTimePicker = true"
                ></input>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="form-section">
        <view class="section-title">任务详情与要求</view>
        
        <view class="form-field">
          <view class="field-label required">任务描述</view>
          <view class="field-control">
            <textarea 
              v-model="taskData.description" 
              placeholder="请详细描述任务需求、具体要求、期望成果等信息"
              maxlength="1000"
              class="textarea-input"
              rows="5"
            ></textarea>
            <text class="field-hint">{{ taskData.description.length }}/1000 字符</text>
          </view>
        </view>
        
        <view class="form-field">
          <view class="field-label">上传参考图片</view>
          <view class="field-control">
            <view class="upload-container multiple">
              <view 
                class="upload-preview" 
                v-for="(img, index) in taskData.images" 
                :key="index"
              >
                <image :src="img" mode="cover"></image>
                <view class="upload-remove" @click="removeImage(index)">
                  <text>×</text>
                </view>
              </view>
              <view 
                class="upload-add" 
                v-if="taskData.images.length < 5"
                @click="chooseImages"
              >
                <text class="upload-plus">+</text>
                <text class="upload-text">上传图片</text>
              </view>
            </view>
            <text class="field-hint">最多上传5张，可提供参考样例或现场环境照片</text>
          </view>
        </view>
        
        <view class="form-field">
          <view class="field-label">飞手要求</view>
          <view class="field-control">
            <view class="checkbox-group">
              <view class="checkbox-grid">
                <label 
                  v-for="requirement in pilotRequirements" 
                  :key="requirement.value"
                  class="checkbox-item"
                  :class="{ checked: taskData.requirements.includes(requirement.value) }"
                  @click="toggleRequirement(requirement.value)"
                >
                  <view class="checkbox-icon">
                    <text v-if="taskData.requirements.includes(requirement.value)">✓</text>
                  </view>
                  <text class="checkbox-text">{{ requirement.label }}</text>
                </label>
              </view>
            </view>
          </view>
        </view>
        
        <view class="form-field">
          <view class="field-label">设备要求</view>
          <view class="field-control">
            <view class="checkbox-group">
              <view class="checkbox-grid">
                <label 
                  v-for="device in requiredDevices" 
                  :key="device.value"
                  class="checkbox-item"
                  :class="{ checked: taskData.requiredDevices.includes(device.value) }"
                  @click="toggleDevice(device.value)"
                >
                  <view class="checkbox-icon">
                    <text v-if="taskData.requiredDevices.includes(device.value)">✓</text>
                  </view>
                  <text class="checkbox-text">{{ device.label }}</text>
                </label>
              </view>
            </view>
            <input 
              v-model="taskData.otherDevices" 
              placeholder="其他特殊设备要求（可选）"
              class="text-input other-input"
            ></input>
          </view>
        </view>
      </view>
      
      <view class="form-section">
        <view class="section-title">预算与设置</view>
        
        <view class="form-field">
          <view class="field-label required">任务预算</view>
          <view class="field-control">
            <view class="budget-input">
              <text class="currency-symbol">¥</text>
              <input 
                v-model="taskData.budget" 
                placeholder="请输入预算金额"
                type="number"
                class="text-input budget-amount"
              ></input>
              <text class="budget-unit">元</text>
            </view>
            <text class="field-hint">请根据任务复杂度合理设置预算，预算越高越容易吸引飞手</text>
          </view>
        </view>
        
        <view class="form-field">
          <view class="field-label">任务有效期</view>
          <view class="field-control">
            <view class="radio-group">
              <label 
                class="radio-item inline" 
                :class="{ checked: taskData.validity === validity.value }"
                v-for="validity in validityOptions" 
                :key="validity.value"
                @click="taskData.validity = validity.value"
              >
                <view class="radio-circle"></view>
                <text class="radio-text">{{ validity.label }}</text>
              </label>
            </view>
          </view>
        </view>
        
        <view class="form-field">
          <view class="field-label">是否需要发票</view>
          <view class="field-control">
            <view class="radio-group inline-group">
              <label 
                class="radio-item inline" 
                :class="{ checked: taskData.needInvoice === 'yes' }"
                @click="taskData.needInvoice = 'yes'"
              >
                <view class="radio-circle"></view>
                <text class="radio-text">是</text>
              </label>
              <label 
                class="radio-item inline" 
                :class="{ checked: taskData.needInvoice === 'no' }"
                @click="taskData.needInvoice = 'no'"
              >
                <view class="radio-circle"></view>
                <text class="radio-text">否</text>
              </label>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <button class="submit-btn" @click="submitTask">
        发布任务
      </button>
      
      <!-- 发布成功弹窗 -->
      <view class="modal-overlay" v-if="showSuccessModal" @click="showSuccessModal = false">
        <view class="modal-dialog success-modal" @click.stop>
          <view class="success-icon">✓</view>
          <text class="success-title">任务发布成功！</text>
          <text class="success-desc">您的任务已成功发布，任务编号：{{ taskNumber }}</text>
          <text class="success-info">飞手将在24小时内为您报价，您可以在"我的任务"中查看进度</text>
          <view class="success-buttons">
            <button 
              class="success-btn primary"
              @click="gotoTaskCenter"
            >
              查看我的任务
            </button>
            <button 
              class="success-btn secondary"
              @click="showSuccessModal = false"
            >
              继续浏览
            </button>
          </view>
        </view>
      </view>
      
      <!-- 城市选择弹窗 -->
      <view class="modal-overlay" v-if="showCityPicker" @click="showCityPicker = false">
        <view class="modal-dialog city-picker" @click.stop>
          <view class="modal-title">选择城市</view>
          <view class="city-picker-content">
            <picker 
              mode="multiSelector"
              :range="cityList"
              @change="onCityChange"
              @columnchange="onCityColumnChange"
            >
              <view class="picker-view">
                {{ taskData.city || '请选择城市' }}
              </view>
            </picker>
          </view>
        </view>
      </view>
      
      <!-- 日期选择弹窗 -->
      <view class="modal-overlay" v-if="showDatePicker" @click="showDatePicker = false">
        <view class="modal-dialog date-picker" @click.stop>
          <view class="modal-title">选择日期</view>
          <view class="date-picker-content">
            <picker 
              mode="date"
              start="today"
              @change="onDateChange"
            >
              <view class="picker-view">
                {{ taskData.date || '请选择日期' }}
              </view>
            </picker>
          </view>
        </view>
      </view>
      
      <!-- 时间选择弹窗 -->
      <view class="modal-overlay" v-if="showTimePicker" @click="showTimePicker = false">
        <view class="modal-dialog time-picker" @click.stop>
          <view class="modal-title">选择时间</view>
          <view class="time-picker-content">
            <picker 
              mode="time"
              @change="onTimeChange"
            >
              <view class="picker-view">
                {{ taskData.time || '请选择时间' }}
              </view>
            </picker>
          </view>
        </view>
      </view>
      
      <!-- 发布提示弹窗 -->
      <view class="modal-overlay" v-if="showTipsModal" @click="showTipsModal = false">
        <view class="modal-dialog tips-modal" @click.stop>
          <view class="modal-title">发布任务提示</view>
          <view class="tips-content">
            <view class="tips-item">
              <text class="tips-icon">1.</text>
              <text class="tips-text">请详细描述您的任务需求，以便飞手准确理解并报价</text>
            </view>
            <view class="tips-item">
              <text class="tips-icon">2.</text>
              <text class="tips-text">合理的预算会吸引更多飞手关注，提高任务完成效率</text>
            </view>
            <view class="tips-item">
              <text class="tips-icon">3.</text>
              <text class="tips-text">任务发布后，您可以在"我的任务"中查看飞手报价并选择合适的飞手</text>
            </view>
            <view class="tips-item">
              <text class="tips-icon">4.</text>
              <text class="tips-text">任务完成后，请及时确认并评价，这将影响飞手的信誉等级</text>
            </view>
          </view>
          <button class="close-tips-btn" @click="showTipsModal = false">
            我知道了
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 任务数据
      taskData: {
        title: '',
        type: '',
        city: '',
        address: '',
        date: '',
        time: '',
        description: '',
        images: [],
        requirements: [],
        requiredDevices: [],
        otherDevices: '',
        budget: '',
        validity: '3',
        needInvoice: 'no'
      },
      
      // 任务类型
      taskTypes: [
        { label: '航拍服务', value: 'aerial' },
        { label: '测绘建模', value: 'mapping' },
        { label: '巡检服务', value: 'inspection' },
        { label: '植保服务', value: 'planting' },
        { label: '设备租赁', value: 'rental' },
        { label: '飞行教学', value: 'teaching' },
        { label: '其他服务', value: 'other' }
      ],
      
      // 城市数据
      cityList: [
        ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京', '重庆', '西安'],
        ['东城区', '西城区', '朝阳区', '海淀区', '丰台区', '石景山区']
      ],
      cityIndex: [0, 0],
      
      // 飞手要求
      pilotRequirements: [
        { label: '3年以上经验', value: 'experience' },
        { label: '持有民航局执照', value: 'license' },
        { label: '有类似项目案例', value: 'cases' },
        { label: '实名认证飞手', value: 'verified' },
        { label: '4.5星以上评分', value: 'rating' },
        { label: '可开发票', value: 'invoice' }
      ],
      
      // 设备要求
      requiredDevices: [
        { label: '专业级无人机', value: 'professional' },
        { label: '高清相机', value: 'hd-camera' },
        { label: '云台稳定器', value: 'gimbal' },
        { label: '备用电池', value: 'battery' },
        { label: '航拍灯光', value: 'lights' },
        { label: 'GPS定位系统', value: 'gps' }
      ],
      
      // 有效期选项
      validityOptions: [
        { label: '1天', value: '1' },
        { label: '3天', value: '3' },
        { label: '7天', value: '7' },
        { label: '15天', value: '15' }
      ],
      
      // 弹窗控制
      showCityPicker: false,
      showDatePicker: false,
      showTimePicker: false,
      showTipsModal: false,
      showSuccessModal: false,
      
      // 任务编号
      taskNumber: ''
    };
  },
  
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    
    // 显示发布提示
    showTips() {
      this.showTipsModal = true;
    },
    
    // 选择城市变化
    onCityChange(e) {
      const val = e.detail.value;
      this.cityIndex = val;
      this.taskData.city = `${this.cityList[0][val[0]]} ${this.cityList[1][val[1]]}`;
      this.showCityPicker = false;
    },
    
    // 城市列变化
    onCityColumnChange(e) {
      // 实际项目中可以根据第一列选择动态加载第二列数据
    },
    
    // 选择日期
    onDateChange(e) {
      this.taskData.date = e.detail.value;
      this.showDatePicker = false;
    },
    
    // 选择时间
    onTimeChange(e) {
      this.taskData.time = e.detail.value;
      this.showTimePicker = false;
    },
    
    // 选择位置
    chooseLocation() {
      // 调用地图选择位置
      uni.chooseLocation({
        success: (res) => {
          this.taskData.address = res.name;
          // 实际项目中可以保存经纬度信息
          console.log('选择的位置：', res);
        },
        fail: (err) => {
          console.log('选择位置失败：', err);
        }
      });
    },
    
    // 选择图片
    chooseImages() {
      const maxCount = 5 - this.taskData.images.length;
      if (maxCount <= 0) return;
      
      uni.chooseImage({
        count: maxCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.taskData.images = this.taskData.images.concat(res.tempFilePaths);
        }
      });
    },
    
    // 删除图片
    removeImage(index) {
      this.taskData.images.splice(index, 1);
    },
    
    // 切换飞手要求
    toggleRequirement(value) {
      const index = this.taskData.requirements.indexOf(value);
      if (index > -1) {
        this.taskData.requirements.splice(index, 1);
      } else {
        this.taskData.requirements.push(value);
      }
    },
    
    // 切换设备要求
    toggleDevice(value) {
      const index = this.taskData.requiredDevices.indexOf(value);
      if (index > -1) {
        this.taskData.requiredDevices.splice(index, 1);
      } else {
        this.taskData.requiredDevices.push(value);
      }
    },
    
    // 验证表单
    validateForm() {
      if (!this.taskData.title) {
        this.showToast('请输入任务标题');
        return false;
      }
      
      if (!this.taskData.type) {
        this.showToast('请选择任务类型');
        return false;
      }
      
      if (!this.taskData.city) {
        this.showToast('请选择所在城市');
        return false;
      }
      
      if (!this.taskData.address) {
        this.showToast('请输入详细地址');
        return false;
      }
      
      if (!this.taskData.date) {
        this.showToast('请选择任务日期');
        return false;
      }
      
      if (!this.taskData.time) {
        this.showToast('请选择任务时间');
        return false;
      }
      
      if (!this.taskData.description || this.taskData.description.length < 20) {
        this.showToast('请详细描述任务需求，至少20个字符');
        return false;
      }
      
      if (!this.taskData.budget || this.taskData.budget < 50) {
        this.showToast('请输入合理的预算金额，最低50元');
        return false;
      }
      
      return true;
    },
    
    // 提交任务
    submitTask() {
      if (!this.validateForm()) {
        return;
      }
      
      uni.showLoading({ title: '发布中...' });
      
      // 模拟表单提交
      setTimeout(() => {
        uni.hideLoading();
        // 生成任务编号
        this.taskNumber = 'TSK' + new Date().getTime().toString().slice(-8);
        this.showSuccessModal = true;
      }, 1500);
    },
    
    // 前往任务中心
    gotoTaskCenter() {
      uni.redirectTo({
        url: '/pages/task/my-tasks'
      });
    },
    
    // 显示提示
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      });
    }
  }
};
</script>

<style scoped>
.publish-task-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  padding-bottom: 120rpx;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background: linear-gradient(135deg, #1E40AF, #3B82F6);
  color: #fff;
  position: relative;
}

.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  transform: scaleY(0.5);
}

.navbar-left, .navbar-right {
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
}

.icon-arrow-left, .icon-tips {
  font-size: 36rpx;
}

/* 表单容器 */
.form-container {
  margin: 24rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #F2F3F5;
}

/* 表单字段 */
.form-field {
  display: flex;
  margin-bottom: 28rpx;
}

.form-field:last-child {
  margin-bottom: 0;
}

.field-label {
  width: 180rpx;
  font-size: 28rpx;
  color: #1D2129;
  display: flex;
  align-items: flex-start;
  padding-top: 18rpx;
}

.required::before {
  content: '*';
  color: #FF4D4F;
  margin-right: 6rpx;
}

.field-control {
  flex: 1;
}

/* 输入框样式 */
.text-input {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #1D2129;
  padding: 0 15rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.text-input::placeholder {
  color: #C9CDD4;
}

.textarea-input {
  width: 100%;
  font-size: 28rpx;
  color: #1D2129;
  padding: 15rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  min-height: 200rpx;
  box-sizing: border-box;
  line-height: 1.6;
}

.textarea-input::placeholder {
  color: #C9CDD4;
}

/* 表单提示 */
.field-hint {
  font-size: 22rpx;
  color: #86909C;
  margin-top: 8rpx;
  display: block;
  line-height: 1.5;
}

/* 选择框样式 */
.select-input {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #1D2129;
  padding: 0 15rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.select-arrow {
  color: #C9CDD4;
  font-size: 24rpx;
}

.placeholder {
  color: #C9CDD4;
}

/* 单选框样式 */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  padding-top: 5rpx;
}

.radio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  width: 48%;
  padding: 15rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  box-sizing: border-box;
  cursor: pointer;
}

.radio-item.inline {
  width: auto;
  margin-right: 20rpx;
  padding: 10rpx 20rpx;
}

.inline-group {
  flex-direction: row;
  align-items: center;
}

.radio-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background-color: #F2F3F5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 20rpx;
  font-weight: bold;
}

.radio-item.checked .radio-icon {
  background-color: #367AF6;
  color: #fff;
}

.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 2rpx solid #C9CDD4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-item.checked .radio-circle {
  border-color: #367AF6;
}

.radio-item.checked .radio-circle::after {
  content: '';
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #367AF6;
}

.radio-text {
  font-size: 26rpx;
  color: #1D2129;
  flex: 1;
}

/* 复选框样式 */
.checkbox-group {
  padding-top: 5rpx;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  width: 48%;
  padding: 15rpx;
  border: 1px solid #E5E6EB;
  border-radius: 8rpx;
  box-sizing: border-box;
  cursor: pointer;
}

.checkbox-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 6rpx;
  border: 2rpx solid #C9CDD4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 20rpx;
  font-weight: bold;
}

.checkbox-item.checked .checkbox-icon {
  background-color: #367AF6;
  border-color: #367AF6;
  color: #fff;
}

.checkbox-text {
  font-size: 26rpx;
  color: #1D2129;
  flex: 1;
}

/* 上传组件样式 */
.upload-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 10rpx;
  align-items: flex-start;
}

.upload-add {
  width: 140rpx;
  height: 140rpx;
  border: 2rpx dashed #DDDFE1;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-plus {
  font-size: 40rpx;
  color: #909399;
  margin-bottom: 8rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #909399;
}

.upload-preview {
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
  position: relative;
  overflow: hidden;
}

.upload-preview image {
  width: 100%;
  height: 100%;
  display: block;
}

.upload-remove {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

/* 特殊布局 */
.location-input {
  margin-bottom: 15rpx;
}

.address-input {
  margin-bottom: 15rpx;
}

.location-map {
  display: flex;
  align-items: center;
  color: #367AF6;
  font-size: 26rpx;
  padding: 10rpx 0;
}

.map-icon {
  margin-right: 10rpx;
  font-size: 28rpx;
}

.date-time-inputs {
  display: flex;
  gap: 15rpx;
}

.date-input, .time-input {
  flex: 1;
}

.budget-input {
  display: flex;
  align-items: center;
}

.currency-symbol {
  font-size: 28rpx;
  color: #1D2129;
  margin-right: 10rpx;
}

.budget-amount {
  flex: 1;
}

.budget-unit {
  font-size: 28rpx;
  color: #1D2129;
  margin-left: 10rpx;
}

.other-input {
  margin-top: 15rpx;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 98rpx;
  line-height: 98rpx;
  background-color: #367AF6;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-top: 20rpx;
  box-shadow: 0 6rpx 16rpx rgba(54, 122, 246, 0.3);
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.modal-dialog {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #1D2129;
  border-bottom: 1px solid #F2F3F5;
}

/* 选择器样式 */
.city-picker-content,
.date-picker-content,
.time-picker-content {
  padding: 20rpx 0;
}

.picker-view {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  color: #1D2129;
}

/* 提示弹窗 */
.tips-content {
  padding: 30rpx;
}

.tips-item {
  display: flex;
  margin-bottom: 20rpx;
  line-height: 1.6;
}

.tips-item:last-child {
  margin-bottom: 0;
}

.tips-icon {
  color: #367AF6;
  font-weight: bold;
  margin-right: 10rpx;
  flex-shrink: 0;
}

.tips-text {
  font-size: 26rpx;
  color: #4E5969;
}

.close-tips-btn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #367AF6;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin: 20rpx auto 30rpx;
  display: block;
}

/* 成功弹窗 */
.success-modal {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30rpx;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #E8F7EF;
  color: #00B42A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  margin: 40rpx 0 20rpx;
  animation: bounce 0.6s;
}

.success-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 15rpx;
}

.success-desc {
  font-size: 28rpx;
  color: #367AF6;
  margin-bottom: 15rpx;
  text-align: center;
  padding: 0 40rpx;
}

.success-info {
  font-size: 26rpx;
  color: #86909C;
  margin-bottom: 40rpx;
  line-height: 1.6;
  text-align: center;
  padding: 0 40rpx;
}

.success-buttons {
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: 20rpx;
}

.success-btn {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 16rpx;
  border: none;
  font-weight: 500;
}

.success-btn.primary {
  background-color: #367AF6;
  color: #fff;
}

.success-btn.secondary {
  background-color: #ECF2FF;
  color: #367AF6;
}

/* 动画 */
@keyframes bounce {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* 适配不同屏幕 */
@media (max-width: 375px) {
  .radio-item, .checkbox-item {
    width: 100%;
  }
  
  .field-label {
    width: 150rpx;
  }
}
</style>
